/* ==============================
   ShooterofIO Blog – Home Page
   ============================== */

/* ==============================
   Fonts
   ============================== */

@import url("https://fonts.cdnfonts.com/css/hitmarker-text");
@import url("https://fonts.cdnfonts.com/css/hitmarker-condensed");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&family=Roboto:wght@400;500;700&display=swap");


/* ==============================
   Base
   ============================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;

  font-family: "Hitmarker Text VF", "Roboto", sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: 1px;

  color: #e0e0e0;

  background-color: #1b1b1b;
  background-image: radial-gradient(#222 1px, transparent 1px);
  background-size: 8px 8px;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==============================
   Navbar
   ============================== */

.navbar{
  width:100%;
  height:70px;

  background:#1a1a1a;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 40px;

  position:fixed;
  top:0;
  left:0;

  z-index:1000;

  border-bottom:1px solid #2a2a2a;

  box-sizing:border-box;
}


/* Logo */

.navbar h3{
  margin:0;
  font-size:18px;
  font-family:"Hitmarker Text VF", sans-serif;
  letter-spacing:1px;
  color:#fff;
}


/* Links */

.navbar a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;

  padding:8px 12px;
  margin:0 2px;

  display:inline-flex;
  align-items:center;

  transition:
  color .2s ease,
  background .2s ease;
}

.navbar a:hover{
  color:#00adee;
}


/* Preorder button */

.preorder-btn{
  background:#0078ff;
  padding:8px 16px;
  border-radius:4px;
  font-weight:700;

  transition:
  background .2s ease,
  transform .1s ease;
}

.preorder-btn:hover{
  background:#005fcc;
}

.preorder-btn:active{
  transform:scale(.97);
}


/* ==============================
   Dropdown Menu
   ============================== */

.dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}


/* Dropdown panel */

.dropdown-content{
  position:absolute;

  top:calc(100% + 6px);
  left:0;

  background:#1a1a1a;

  min-width:200px;

  border:1px solid #333;
  border-radius:4px;

  box-shadow:0 8px 18px rgba(0,0,0,0.35);

  opacity:0;
  visibility:hidden;

  transform:translateY(-6px);

  transition:
  opacity .18s ease,
  transform .18s ease,
  visibility .18s;

  z-index:1000;
}


/* Dropdown items */

.dropdown-content a{
  display:block;

  padding:12px 16px;

  font-size:14px;
  font-weight:500;

  white-space:nowrap;

  margin:0;
}


/* Hover effect */

.dropdown-content a:hover{
  background:#2a2a2a;
  color:#00adee;
}


/* Show dropdown */

.dropdown:hover .dropdown-content{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}


/* Prevent hover gap issues */

.dropdown::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:8px;
}

/* ==============================
   Main Layout
   ============================== */

.home-layout {
  max-width: 1600px;

  margin: 0 auto;
  margin-top: 70px;

  padding: 40px;
}


/* ==============================
   Blog List Layout (COD Style)
   ============================== */


.blog-grid{
  display:grid;

  grid-template-columns:repeat(3,1fr);
  column-count:3;

  column-gap:80px;
  row-gap:40px;

  max-width:1400px;
  margin:auto;

  grid-auto-flow:dense;
}

.blog-tile{
  display:flex;
  gap:16px;
  align-items:flex-start;

  padding-bottom:26px;
  border-bottom:1px solid #2a2a2a;

  width:100%;
}

.blog-tile:hover {
  opacity: 0.85;
}

.blog-link{
  display:flex;
  gap:16px;
  text-decoration:none;
  color:inherit;
}

/* Thumbnail */

.blog-tile img{
  width:180px;
  height:100px;

  object-fit:cover;
  flex-shrink:0;

  border-radius:2px;
}


/* Content */

.tile-content{
  display:flex;
  flex-direction:column;

  max-width:260px;
  min-width:0;
}

.tile-content h2{
  font-size: 1.125rem;
  font-weight:100;
  color:#fff;

  margin:0 0 6px 0;

  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  overflow:hidden;
}

.post-hidden{
display:none;
}


/* Meta */

.meta{
  font-size:0.75rem;
  color:#9a9a9a;
  text-transform:uppercase;

  margin-bottom:8px;

  letter-spacing:1px;
}


/* Tags */

.tags{
  display:flex;
  gap:8px;
}

.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#9c978f;
  color:#111;

  font-family:"Hitmarker Text VF", sans-serif;

  font-size:0.75rem;
  font-weight:700;

  padding:6px 10px;

  border-radius:1px;

  letter-spacing:1.5px;

  line-height:1;
}


/* ==============================
   Global Links
   ============================== */

a {
  text-decoration: none;
  color: inherit;
}


/* ==============================
   View More Button
   ============================== */

.view-more-container {
  text-align: center;
  margin-top: 40px;
}

.view-more-btn {
  background: #0078ff;

  border: none;

  color: #fff;

  padding: 12px 25px;

  border-radius: 4px;

  font-family: "Hitmarker Text VF", sans-serif;
  font-weight: 700;

  cursor: pointer;

  transition: background 0.2s ease;
}

.view-more-btn:hover {
  background: #005fcc;
}


/* ==============================
   Footer
   ============================== */

footer {
  margin-top: 60px;

  text-align: center;

  padding: 30px 20px;

  color: #777;

  font-size: 13px;

  border-top: 1px solid #2a2a2a;
}

.footer-links {
  margin-bottom: 15px;
}

.footer-links a {
  color: #aaa;
  font-size: 13px;
  margin: 0 6px;
}

.footer-links a:hover {
  color: #00adee;
}

.dropdown-divider{
  height:1px;
  background:#333;
  margin:8px 0;
}

.dropdown-label{
  display:block;
  padding:10px 16px 6px;

  color:#777;

  font-size:11px;
  font-weight:700;

  letter-spacing:1.5px;
}